Podwójne tło na stronie
Niektóre projekty graficzne, potrafią przyprawić o gęsią skórkę nie jednego webdevelopera. Całkiem niedawno miałem kilka projektów, gdzie tło strony było dość problematyczne i osobę, która zaczyna zabawę z blokami zapewne by skutecznie zniechęciło – bo na tabelkach można dużo łatwiej.
Niektóre projekty graficzne, potrafią przyprawić o gęsią skórkę nie jednego webdevelopera. Całkiem niedawno miałem kilka projektów, gdzie tło strony było dość problematyczne i osobę, która zaczyna zabawę z blokami zapewne by skutecznie zniechęciło – bo na tabelkach można dużo łatwiej.
Założenie jest takie: obrazek ten ma być stroną powitalną, znajdować się na środku strony oraz linkować do strony z zawartością. Dodatkowo po bokach mają się znajdować odpowiednie tła.
O ile z wyśrodkowaniem obrazka i wrzuceniem jednego z dwóch teł każdy sobie bez probemu poradzi, to z tym drugim tłem już niekoniecznie.
Po "tabelkowemu" sprawa wygląda prosto: tabelka, a w niej 3 kolumy (odpowiednio 25%, 50% i 25% szerokość), w pierwszej i ostatniej odpowiednia tła, w środkowej obrazek.
Do dzieła
Mamy poprawnie zbudowany dokument xHTML. Wstawiamy obrazek i tworzymy style.
Style wyglądają tak:
body,html { background: url(pikselowe-tlo-lewe.jpg) repeat-x; margin: 0; text-align: center; img { border: 0; } /* dla obrazków, gdy są one podlinkowane to pojawia się domyślny border */ }
Jako, że na stronie jest tylko obrazek, to od razu w body można wyśrodkować tekst.
Trik
Sztuczka polega na stworzeniu dodatkowego elementu z tłem, który będzie zajmował drugą połowę strony.
Dodajemy nowy element blokowy przed obrazkiem.
Teraz obrazkowi trzeba dodać artybut position: relative, aby mieć możliwość ustawienia kolejności wartsw. Atrybut z-index ustawiamy na 100.
img { position: relative; border: 0; z-index: 100; }
Teraz co pozostaje, to ostylować wspomniany wcześniej element blokowy.
Będzie miał takie właściwości: position:absolute, aby mieć możliwość umieszczenia go w dowolnym miejscu na stronie i ustawić mu kolejność wartsw, szerokość oraz wysokość.
#drugieTlo { background: url(pikselowe-tlo-prawe.jpg) top repeat-x; position: absolute; z-index: 10; /* 10 jest mniejsze od 100, więc będzie pod obrazkiem */ width: 50%; /* połowa strony */ height: 300px; /* wysokość tła */ top: 0; right: 0; /* dzięki tym dwom atrybutom, nasz div ląduje po prawej części strony */ }
Całość do zobaczenia pod adresem: http://blog.shpyo.net/sztuczki_css/podwojne_tlo/ - działa na Firefoxie, Internet Explorerze oraz Operze.
Komentarze 16
No dobre-tak własnie powinno się operować na stylach-ale ja raczej niebawie się w ustawianie warstw-zawsze można to jakoś pominąć...np stosując position i float...ale style to podstawa-tabele odpadają teraz całkowicie...
to mi się właśnie w divach nie podoba. Jak napisałeś, w tabelach nie ma kombinowania. Wstawiasz 3 kolumny i po robocie :D
Dlatego ja jak robię jakąś stronę, to często ją układam na jakiejś jednej, czy 2 tabelkach :)
A jak zrobić, żeby wysokość tła się skalowała do okna przeglądarki?? Próbuję się przestawić z tabelek na divy, ale to masakra jest.
a ja mam do wykonania stronę gdzie praktycznie są 4 tła, po lewe i po prawej po dwa, jedno powtarzające się w pionie, drugie w poziomie, i jak to rozgryźć :(
a to tło to nie jest takie samo?
po co 2 różne?
aaa, już wiem.
różne wysokości.
przepraszam za pośpiech, taki już jestem niecierpliwy;)
@przejście z tabelek i tła
myślę że jak to przeczytasz i dodasz trochę wyobraźni to rozwiąże problem, bo inaczej jest to materiał na nowy tutorial: http://perfectionorvanity.com/kategoria/css/2 zresztą jak prawie wszystkie artykuły z tego bloga
Alexander Ty mózgu. Wiesz co to standardy w3c? TO gratuluję robienia tabelek.
hehe niektórzy piszą takie rzeczy jakby się zatrzymali przed 7 laty i dalej klepią tabelki - xhtml i css to zajebioza przeca jest
Co do standardów W3C - to tabelki również są w nim zawarte. Używa się ich do prezentowania danych tabelarycznych. Nie sądzisz chyba że wszystkiego typu listy będą na divach. Po prostu tworzenie szablonów w oparciu o tabele jest już przestarzale i mało eleganckie. Ale nie stosujmy na siłę div-ów tylko dlatego iż jest to modne ;]
hehe niektórzy piszą takie rzeczy jakby się zatrzymali przed 7 laty i dalej klepią tabelki - xhtml i css to zajebioza przeca jest
Co do standardów W3C - to tabelki również są w nim zawarte. Używa się ich do prezentowania danych tabelarycznych. Nie sądzisz chyba że wszystkiego typu listy będą na divach. Po prostu tworzenie szablonów w oparciu o tabele jest już przestarzale i mało eleganckie. Ale nie stosujmy na siłę div-ów tylko dlatego iż jest to modne ;]
W sumie ciekawa sprawa z tymi podwójnymi warstwami, próbowałem coś takiego zrobić ale niestety się nie udało.
Link nie działa:( Można go wciskać w nieskończoność.
Przydało się. Dziękuje!
No i jest fajnie,dzięki wielkie.